خصائص الحدود في الـ CSS
خواص الحدود في الـ CSS تسمح لك أن تحدد نمط و عرض و لون الحدود لأي عنصر HTML
أولا الخاصية border-style :
الخاصية border-style تحدد نمط الحد الذي ينبغي أن يعرض عليه الحد و هذه الخاصية تمتلك القيم التالية :
1. Dotted : نوع الحد منقط
2. Dashed : نوع الحد متقطع
3. Solid : نوع الحد متصل
4. Double : نوع الحد مزدوج
5. Groove : نوع الحد ثلاثي الأبعاد محفور ( يعتمد التأثير على قيمة لون الحد )
6. Ridge : نوع الحد ثلاثي الأبعاد بارز ( يعتمدالتأثيرعلىقيمةلونالحد )
7. Inset : نوع الحد ثلاثي الأبعاد مدرج ( يعتمدالتأثيرعلىقيمةلونالحد )
8. Outset : نوع الحد ثلاثي الأعاد بارز ( يعتمدالتأثيرعلىقيمةلونالحد )
9. None : نوع الحد لايملك أي قيمة
10. Hidden : نوع الحد مخفي
الخاصية border-style ممكن أن تكون من واحد إلى أربع قيم ( حد علوي , حد يميني , حد سفلي , حد يساري )
و المثال التالي يبين القيم المختلفة لنمط الحدود
ملاحظة : أي من خصائص الـ CSS التي سوف يتم توضيحها لن يكون لها أي تأثير أو قيمة ما بم يتم تعيين قيمة للخاصية border-style .
ثانيا الخاصية عرض الحدود border-width
الخاصية border-width تحدد عرض الحدود للأطراف الأربعة ( علوي , يميني , سفلي , يساري )
يمكن تعيين عرض الحدود بحجم معين من خلال وحدات قياس متعدد ( px,pt,cm,mm,em ….. )
أو باستخدام إحدى القيم الثلاثة المخزنة مسبقا ( thick , medium , thin )
الخاصية border-width ممكن أن تكون من واحد إلى أبع قيم ( علوي , يميني , سفلي , يساري )
ثالثا الخاصية لون الحدود border-color
الخاصية border-color تستخدم لتعيين اللون للحدود الأربعة و يمكن أن يتم تعيين اللون للحدود بالأساليب التالية :
1. اسم اللون : تعيين اسم لون قياسي red
2. القيم الست عشرية : hex مثل #ff0000
3. قيم RGB مثل rgb(255,0,0)
و الخاصية لون الحدود border-color ممكن أن تكون من واحد إلى أربع قيم (علوي , يميني , سفلي , يساري )
ملاحظة : إذا لم يتم تعيين قيمة للخاصية border-color فإنه يرث لون العنصر الأب
رابعا الحدود – الجوانب الفردية
من خلال المثال التالي يمكننا أن نرى أنه من الممكن تعيين قيم مختلفة للحدود و لكل طرف على حدا
في الـ CSS يوجد أيضا خصائص لتعيين كل حد ( علوي , يميني , سفلي , يساري )
Border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
و المثال التالي يعطي نفس النتيجة و لكن بطريقة مختلفة و سنتعرف على كافة تلك الخصائص في وقت لاحق من هذه الدرس :
Border-style:dotted solid ;
إذا كانت الخاصة تملك أربع قيم فإنها التأصر يطبق وفق الترتيب التالي
علوي يمين سفلي يسار
إذا كانت الخاصة تملك ثلاث قيم فإن الترتيب هو التالي
علوي يمني سفلي
إذا كانت الخاصية تملك قيمتين فإن الترتيب كالتالي
علوي سفلي و يميني يساري
إذا كانت الخاصية تملك قيمة واحدة فإنها تطبق على الجوانب الأربعة
خامسا خصائص الحدود المختصرة :
كما رأينا في قسم الحدود الجوانب الفردية السابقة الذكر هناك العديد من الخصائص التي يجب مراعاتها عند التعامل مع الحدود
لاختصار الكود البرمجي من الممكن تحديد جميع خصائص الحدود الفردية في خاصية واحدة
و خصائص الحدود المختصرة تتبع الترتيب التالي :
1. عرض الحدود border-width
2. نمط الحدود border-style ( وهو مطلوب )
3. لون الحدود border-color
مثال :
P{border : 5px solid red ; }
و يمكننا أيضا استخدام اختصار الكود لكل جانب على حدة كما في المثال التالي :
P{border-top : 5px solid blue ; }
سادسا الحدود المستديرة
الخاصية border-radius تستعمل لإستدارة الحدود لعنصر ما
لإضافة حدود مستديرة لعنصر ما نقوم باتباع ما يلي :
P{ border-style : solid ;
border-radius : 5px ;
}
ملاحظة : الخاصية border-radius غير مدعوم في المتصفح الإنترنت إكسبلولر 8 و ما قبله
سابعا المزيد من التطبيقات على الحدود
مثال 1
جميع خصائص الحد العلوي في تصريح واحد
يوضح هذا المثال اختصار الكود لتعيين كافة خصائص الحد العلوي في تصريح واحد
P { border-top : thick solid blue ; }
مثال 2
تعيين نمط الحد السفلي
هذا المثال يوضح كيفية تعيين نمط الحد السفلي
P { border-bottom : 5px dotted red ; }
مثال 3
تعيين عرض الحد اليساري
هذا المثال يوضح كيفية تعيين عرض الحد اليساري
P { border-style : solid ;
border-left-width : 10px ;
}
مثال 4
تعيين لون الحدود الأربعة
هذا المثال يوضح كيف يمكننا تعيين لون الحدود الأربعة بطرق مختلفة
P { border-style : solid ;
border-color : red blue green black ;
}
p.tow {
border-style : solid ;
border-top-color : red ;
border-right-color : green ;
border-bottom-color : blue ;
border-left-color : black ;
}
مثال 5
تعيين لون الحد اليميني
هذا المثال يوضح كيفية تعيين لون الحد اليميني
P { border-style : solid ;
border-right-color : #0000ff ;
}
